<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-17 17:54:46
 * @LastEditTime: 2021-10-23 17:06:15
 * @Description: 注册组件
-->
<template>
  <div>
    <div class="register">
      <!-- 导航区域 -->
      <!-- 头部区域 -->
      <HeaderNav :right="false" class="register-header">
        <template #icon>
          <i class="iconfont icon-left" @click="goBack"></i>
        </template>
        <template #center>
          <span>注册</span>
        </template>
      </HeaderNav>
      <section class="page">
        <div class="register-page">
          <div class="register-wrap">
            <van-form @submit="slideShow = true">
              <van-field
                class="login-field"
                v-model="registerFrom.username"
                name="username"
                label="用户名"
                placeholder="用户名/邮箱/已验证手机"
                clearable
                colon
                clear-trigger="always"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="registerFrom.password"
                :type="passwordType"
                name="password"
                label="密码"
                placeholder="请输入密码"
                clearable
                colon
                :right-icon="passwordIcon"
                clear-trigger="always"
                @click-right-icon="toggleType"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                class="login-field"
                v-model="registerFrom.email"
                name="email"
                label="邮箱"
                placeholder="请输入邮箱"
                clearable
                colon
                clear-trigger="always"
                :rules="[
                  { required: true, message: '请填写邮箱' },
                  { pattern: emailRule, message: '请输入正确邮箱地址' },
                ]"
              />
              <van-field
                class="login-field"
                v-model="registerFrom.phone"
                name="phone"
                label="手机"
                placeholder="请输入手机号"
                clearable
                colon
                clear-trigger="always"
                :rules="[
                  { required: true, message: '请填写手机号' },
                  { pattern: phoneRule, message: '请输入正确手机号' },
                ]"
              />
              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit"
                  >下一步</van-button
                >
              </div>
            </van-form>
          </div>
        </div>
        <transition name="slide">
          <div class="set-security" v-show="slideShow">
            <div class="set-security-head">
              <i class="iconfont icon-left"></i>
              <span>设置密保问题</span>
            </div>
            <p>设置的密保问题和答案将用于忘记密码时重置密码!</p>
            <div class="register-page">
              <div class="register-wrap">
                <van-form @submit="register">
                  <van-field
                    class="login-field"
                    v-model="registerslide.question"
                    name="question"
                    label="密保问题"
                    placeholder="请输入密保问题"
                    clearable
                    colon
                    clear-trigger="always"
                    :rules="[{ required: true, message: '密保问题不能为空' }]"
                  />
                  <van-field
                    class="login-field"
                    v-model="registerslide.answer"
                    name="answer"
                    label="密保答案"
                    placeholder="请输入密保答案"
                    clearable
                    colon
                    clear-trigger="always"
                    :rules="[{ required: true, message: '密保答案不能为空' }]"
                  />
                  <div style="margin: 16px">
                    <van-button round block type="info" native-type="submit"
                      >立即注册</van-button
                    >
                  </div>
                </van-form>
              </div>
            </div>
          </div>
        </transition>
      </section>
    </div>
  </div>
</template>

<script>
// 公共组件的引用
import HeaderNav from "@/components/header-nav.vue";

// 导入混入api方法
import { registerApi } from "@/api/login";

export default {
  name: "Register",
  components: {
    HeaderNav,
  },
  data() {
    return {
      errorMsg: "",
      emailRule:
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      phoneRule:
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
      registerFrom: {
        username: "",
        password: "",
        email: "",
        phone: "",
      },
      registerslide: {
        question: "",
        answer: "",
      },
      passwordType: "password",
      passwordIcon: "a iconfont icon-eye1 eye",
      slideShow: false,
    };
  },
  computed: {
    registerParams() {
      return {
        ...this.registerFrom,
        ...this.registerslide,
      };
    },
  },
  methods: {
    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },
    toggleType() {
      if (this.passwordIcon === "a iconfont icon-eye1 eye") {
        this.passwordType = "text";
        this.passwordIcon = "a iconfont icon-eye eye";
      } else {
        this.passwordType = "password";
        this.passwordIcon = "a iconfont icon-eye1 eye";
      }
    },
    // 注册
    register() {
      registerApi(this.registerParams, (data) => {
        this.$router.replace({
          path: "/login",
        });
        setTimeout(() => {
          this.$Toast.success(data.message);
        }, 600);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
// 头部区域
.register-header {
  display: block;
  position: relative;
  width: 100%;
  height: 88px;
  text-align: center;
  line-height: 88px;
  padding: 0 20px;
  font-size: 34px;
  background-color: $bc;
  @include boxSizing;
  .iconfont {
    position: absolute;
    left: 20px;
    top: 0;
    font-size: 50px;
    font-weight: bold;
  }
}
.register {
  .page {
    padding: 0 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .register-page {
      margin-top: 60px;

      .register-wrap {
        width: 100%;

        .van-field {
          height: 100px;
          align-items: center;
        }

        .register-text {
          @include fj;
          width: 100%;
          height: 60px;
          line-height: 60px;
          padding: 20px 0;
          margin-top: 20px;
          border-bottom: 1px solid #dcdcdc;

          .iconfont {
            font-size: 26px;
            color: #cccccc;

            &.eye {
              padding: 0 30px;
              font-size: 40px;
              border-right: 1px solid #dcdcdc;
            }
          }

          input {
            width: 100%;
            height: 100%;
            margin-right: 20px;
            line-height: 60px;
            color: #222;
            font-size: 32px;
          }

          span {
            padding-left: 20px;
            font-size: 30px;
          }

          div {
            display: flex;
          }
        }
      }
    }

    .register-error {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 30px 0;
      color: $red;
      font-size: 26px;
    }

    .register-button {
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-size: 32px;
      background: rgba(246, 53, 21, 0.5);
      @include borderRadius(60px);

      &.active {
        background: rgb(246, 53, 21);
      }
    }

    .set-security {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 0 30px;
      z-index: 100;
      background: #fff;
      @include boxSizing;

      p {
        font-size: 30px;
        color: #999;
        padding-top: 30px;
      }

      .set-security-head {
        position: relative;
        width: 100%;
        height: 88px;
        text-align: center;
        line-height: 88px;
        font-size: 34px;
        @include boxSizing;

        .iconfont {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 50px;
          font-weight: bold;
        }
      }
    }

    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.5s;
    }

    .slide-enter,
    .slide-leave-to {
      transform: translate3d(100%, 0, 0);
    }
  }
}
</style>
